<template>
  <view class="wh_750 bg_F5F5F5 flex flex-column align-center pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack title="家谱简介" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height: (Number(page.headerHeight)) + 'px'}"></view>
    <view class="signature_textare mt_25">
      <textarea class="signature_textare_class" v-model="page.signatureValue" :style="{
        minHeight : '800rpx'
      }" :maxlength="200" autofocus="true"
                placeholder="请输入家谱简介～"
                placeholder-class="signature_textarePlaceholder" auto-height></textarea>
    </view>
    <view class="signature_tips mt_10 flex align-center justify-between">
      <view class="signature_tips_left ml_14">
        <text class="signature_tips_left_text">最多可输入200字</text>
        <text class="signature_tips_right_text ml_14">{{
            page.signatureValue.length
          }}/200
        </text>
      </view>
      <view class="signature_tips_button_class flex align-center justify-center mr_14" @click="setSignature">
        <text class="signature_tips_button_class_text">完成</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';

  const page = reactive({
    headerHeight: 0,
    signatureValue: '',
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function setSignature() {
    uni.$emit('setSignature', page.signatureValue);
    uni.navigateBack();
  }
</script>


<style scoped lang="scss">
  .signature_textare {
    width: 661rpx;
    background: #EDEDED;
    border-radius: 17rpx 17rpx 17rpx 17rpx;
    padding: 16rpx 14rpx;
    overflow: hidden;

    .signature_textare_class {
      width: 633rpx;
      min-height: 202rpx;
    }

    .signature_textarePlaceholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #4B4B4B;
    }

  }

  .signature_tips {
    width: 661rpx;

    .signature_tips_left {
      .signature_tips_left_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }

      .signature_tips_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }
    }

    .signature_tips_right {
      .signature_tips_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }

    }

    .signature_tips_button_class {
      width: 133rpx;
      height: 48rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;

      .signature_tips_button_class_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }

  .signature_button {
    width: 661rpx;

    .signature_tips_button_class {
      width: 133rpx;
      height: 48rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;

      .signature_tips_button_class_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
